<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel='stylesheet' href='/stylesheets/global.css' />
    <link rel='stylesheet' href='/stylesheets/add.css' />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <form class="add-form" action="/add" method="post" enctype="multipart/form-data">
        描述:
        <input class="form-control" id="from-describe" type="text" name="details" required>
        图片：
        <input class="fileinput" id="from-url" name="url" type="file" accept="image/jpg, image/png" required>
        <p class="mt8"><span class="ipt-remark">只允许上传jpg、png格式</span></p>
        文件：
        <input class="fileinput" id="from-project" name="project" accept="application/zip" type="file" required>
        <p class="mt8"><span class="ipt-remark">只允许上传zip格式</span></p>
        <div class="form-group">
          <label class="labTitle col-form-label">组件标签：</label>
          <div class="txt-box">
            <div class="tag-box d-flex flex-row" id="articleTagBox">
                <input type="hidden" name="hidTags" id="from-hidTags" value="">
                <div id="Tags">

                </div>
                <input type="text" maxlength='5' id="tags_inp">
                <span class="btn-add-tag" onclick="addTags()" id="addTag">
                    <svg t="1535953779842" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3712" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
                      <path d="M736 64H288C164.8 64 64 164.8 64 288v448c0 123.2 100.8 224 224 224h448c123.2 0 224-100.8 224-224V288c0-123.2-100.8-224-224-224z m-28.8 504h-140.8v140.8c0 30.4-25.6 56-56 56s-56-25.6-56-56v-140.8h-140.8c-30.4 0-56-25.6-56-56s25.6-56 56-56h140.8v-140.8c0-30.4 25.6-56 56-56s56 25.6 56 56v140.8h140.8c30.4 0 56 25.6 56 56s-24 56-56 56z" p-id="3713" fill="#349edf"></path>
                    </svg>
                  <span>添加标签</span>
                </span>
              </div>
            </div>
          </div>
          <p class="mt8"><span class="ipt-remark">最多添加3个标签、最少添加一个标签 , 每个标签最多五个字</span></p>
          <div class="categorie-list">
              <% label.map((item,index)=>{ %>
                <div class="form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" onclick="checkboxOnclick(this)" type="checkbox" value="<%= item.name %>" id="<%= item.id %>">
                        <i class="lab-chk-icon" for="chk01">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1514450759045" class="icon-checked" viewBox="0 0 1024 1024">
                                <path d="M768 0H256C115.2 0 0 115.2 0 256v512c0 140.8 115.2 256 256 256h512c140.8 0 256-115.2 256-256V256c0-140.8-115.2-256-256-256z m17.6 377.6L460.8 728c-9.6 9.6-27.2 14.4-40 14.4-14.4 0-32-3.2-41.6-14.4l-142.4-153.6c-17.6-19.2-17.6-49.6 0-68.8 17.6-19.2 46.4-19.2 64 0l120 128 300.8-324.8c17.6-19.2 46.4-19.2 64 0s17.6 49.6 0 68.8z" p-id="2164" fill="#7ed321" data-spm-anchor-id="a313x.7781069.0.i4" class=""></path>
                            </svg>
                        </i>
                        <span class="spanIsAgree"><%= item.name %></span>
                    </label>
                </div>
              <% }) %>
          </div>
        <buttom class="btn btn-primary" onclick="submit()">提交</buttom>
      </form>

    <script>
      //拿到label标签
      let label_data = JSON.parse('<%- JSON.stringify(label)%>') || [];

      let tags_inp = $('#tags_inp');
      let arr = new Array();
      //添加remove方法
      Array.prototype.remove = function(val) { 
        var index = this.indexOf(val); 
        if (index > -1) { 
          this.splice(index, 1); 
        }
      };

      //添加标签点击事件
      let addTags = ()=>{
        if(arr.length >= 3){
          alert('组件最多绑定3个标签');
          return false;
        }
        tags_inp.css('display','block').focus()
      }

      //input丢失光标
      tags_inp.blur(()=>{
          $(this).val('');
          tags_inp.css('display','none')
      })

      //input键盘事件
      tags_inp.keydown(function(event){
          event = event ? event: window.event;
          let _value = $(this).val();
          if(event.keyCode == 13&& _value != ''){
            let la_type = label_data.find(item => {
                return item.name == _value;
            });
            if(la_type){
              alert('此标签已经存在了');
              $(this).val('');
            }else{
              let ar_type = arr.find(item => {
                  return item == _value;
              });
              if(ar_type){
                alert('不能重复添加一个标签哟~');
                $(this).val('');
              }else{
                $('#Tags').append(`
                  <div class="tag" onclick="deleteTags(this)" id="${_value}">
                    <span class="name" contenteditable="false">${_value}</span>
                    <i class="xheIcon icon-guanbi">
                      <svg t="1535953077191" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3356" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
                        <path d="M896 0L512 384 128 0 0 128l384 384L0 896l128 128 384-384 384 384 128-128-384-384 384-384z" p-id="3357"></path>
                      </svg>
                    </i>
                  </div>
                `);
                arr.push(_value);
                $(this).val('');
                if(arr.length >= 3){
                  tags_inp.css('display','none')
                }
              }
            }
          }
      })

      //删除事件
      let deleteTags = (ev)=>{
        let target = event.target.nodeName;
        if(target == 'svg' || target == 'path' || target == 'I'){
          let _id = ev.id;
          let _type = label_data.find(item => {
              return item.name == _id;
          });
          if(_type){
            arr.remove(_id);
            $('#'+_id).remove();
            document.getElementById(_type.id).checked = false;
          }else{
            arr.remove(_id);
            $('#'+_id).remove();
          }
        }
      }

      //标签点击
      let checkboxOnclick = (ev)=>{
        let {value = ''} = ev;
        //g勾选
        if(ev.checked){
          if(arr.length >= 3){
            alert('组件最多绑定3个标签');
            ev.checked = false;
            return false;
          }
          $('#Tags').append(`
            <div class="tag" onclick="deleteTags(this)" id="${value}">
              <span class="name" contenteditable="false">${value}</span>
              <i class="xheIcon icon-guanbi">
                <svg t="1535953077191" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3356" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
                  <path d="M896 0L512 384 128 0 0 128l384 384L0 896l128 128 384-384 384 384 128-128-384-384 384-384z" p-id="3357"></path>
                </svg>
              </i>
            </div>
          `);
          arr.push(value);
        }else{//取消
          let _id = ev.value;
          ev.checked = false;
          arr.remove(_id);
          $('#'+_id).remove();
        }
      }

      //提交
      let submit = ()=>{
        document.querySelector('#from-hidTags').value = arr;
        //描述
        let describe = $('#from-describe').val();
        if(describe == ''){
          alert('请填写描述');
          return false;
        }

        //图片
        let url = $('#from-url').val();
        if(url == ''){
          alert('请上传图片');
          return false;
        }

        //项目
        let project = $('#from-project').val();
        if(project == ''){
          alert('请上传项目文件');
          return false;
        }

        //标签
        let hidTags = $('#from-hidTags').val();
        if(hidTags == ''){
          alert('请填选标签');
          return false;
        }
        document.querySelector('.add-form').submit();
      }

      
      //组件from回车提交
      document.onkeydown=keyDownSearch; 
      function keyDownSearch(e) {  
          // 兼容FF和IE和Opera  
          var theEvent = e || window.event;  
          var code = theEvent.keyCode || theEvent.which || theEvent.charCode;  
          if (code == 13) {   
              return false;  
          }
          return true;  
      } 
    </script>
  </body>
</html>